<template>
	<view class="content">

		<!-- 轮播图 -->
		<swiper class="banner" indicator-dots="true" indicator-active-color="#4a6bdf" autoplay circular :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in bannerList" :key="index" @click="goToDetail(item.id)">
				<image :src="getImageUrl(item.cover)" mode="aspectFill"></image>
				<view class="banner-title">{{ item.title }}</view>
			</swiper-item>
		</swiper>
		
		<!-- 快捷入口 -->
		<view class="quick-nav">
			<view class="quick-nav-item" @click="navigateToAllExhibitions">
				<view class="icon-circle exhibition-icon">
					<text class="icon-text">展</text>
				</view>
				<text>全部展览</text>
			</view>
			<view class="quick-nav-item" @click="navigateToReservation">
				<view class="icon-circle reservation-icon">
					<text class="icon-text">约</text>
				</view>
				<text>立即预约</text>
			</view>
		</view>
		
		<!-- 博物馆信息 -->
		<view class="card museum-info">
			<view class="card-title">
				<text class="title-text">博物馆简介</text>
				<view class="title-line"></view>
			</view>
			<view class="info-content">
				<view class="info-item">
					<view class="info-icon time-icon">
						<text class="icon-inner">时</text>
					</view>
					<text class="label">开放时间：</text>
					<text class="value">{{ museumInfo.openTime || '周二至周日 9:00-17:00（16:00停止入场）' }}</text>
				</view>
				<view class="info-item">
					<view class="info-icon location-icon">
						<text class="icon-inner">地</text>
					</view>
					<text class="label">地址：</text>
					<text class="value">{{ museumInfo.address || '北京市东城区东长安街16号' }}</text>
				</view>
				<view class="info-item">
					<view class="info-icon phone-icon">
						<text class="icon-inner">电</text>
					</view>
					<text class="label">联系电话：</text>
					<text class="value">{{ museumInfo.contactPhone || '010-12345678' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 展览列表 -->
		<view class="card exhibition-list">
			<view class="card-title">
				<text class="title-text">精彩展览</text>
				<view class="title-line"></view>
				<view class="more-btn" @click="navigateToAllExhibitions">
					<text>更多</text>
					<view class="arrow-right"></view>
				</view>
			</view>
			<view class="loading-wrapper" v-if="loading">
				<uni-load-more status="loading" :contentText="loadingText"></uni-load-more>
			</view>
			<view v-else-if="exhibitionList.length === 0" class="empty-wrapper">
				<image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
				<text>暂无展览信息</text>
			</view>
			<view v-else class="exhibition-item" v-for="item in exhibitionList.slice(0, 3)" :key="item.id" @click="goToDetail(item.id)">
				<image class="exhibition-img" :src="getImageUrl(item.cover)" mode="aspectFill"></image>
				<view class="exhibition-info">
					<view class="exhibition-title">{{item.title}}</view>
					<view class="exhibition-time">
						<view class="time-icon-small">
							<text class="icon-inner-small">日</text>
						</view>
						<text>{{formatDate(item.startTime)}} - {{formatDate(item.endTime)}}</text>
					</view>
					<view class="exhibition-status" :class="{'status-active': item.status === 1}">
						{{ item.status === 1 ? '展览中' : '未展览' }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部预约入口 -->
		<view class="reserve-entry" @click="navigateToReservation">
			<view class="reserve-btn">立即预约参观</view>
		</view>
		
		
	</view>
</template>

<script>
	import { getExhibitionList } from '@/api/exhibition.js';
	import { getMuseumInfo } from '@/api/system.js';
	import { getImageUrl } from '@/api/file.js';
	
	export default {
		data() {
			return {
				bannerList: [],
				exhibitionList: [],
				museumInfo: {},
				loading: true,
				loadingText: {
					contentdown: '加载更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多数据了'
				},
				
			}
		},
		onLoad() {
			this.loadMuseumInfo();
			this.loadExhibitionList();
		},
		methods: {
			// Add getImageUrl directly to methods
			getImageUrl,
			
			// 加载博物馆信息
			async loadMuseumInfo() {
				try {
					const res = await getMuseumInfo();
					if (res.code === 200 && res.data) {
						this.museumInfo = res.data;
					}
				} catch (error) {
					console.error('获取博物馆信息失败', error);
					// 使用默认数据
					this.museumInfo = {
						museumName: '博物馆',
						openTime: '周二至周日 9:00-17:00（16:00停止入场）',
						address: '北京市东城区东长安街16号',
						contactPhone: '010-12345678'
					};
				}
			},
			
			// 加载展览列表
			async loadExhibitionList() {
				this.loading = true;
				try {
					const res = await getExhibitionList({ status: 1 });
					if (res.code === 200 && res.data && res.data.records) {
						this.exhibitionList = res.data.records;

						console.log(this.exhibitionList);
						
						// 取前三个作为轮播
						this.bannerList = this.exhibitionList.slice(0, 3);
					} else {
						throw new Error('获取展览列表失败');
					}
				} catch (error) {
					console.error('获取展览列表失败', error);
					// 使用测试数据
					this.exhibitionList = [
						{
							id: 1,
							title: '古代文物展',
							cover: '/static/default-cover.png',
							startTime: '2023-08-01',
							endTime: '2023-12-31',
							status: 1
						},
						{
							id: 2,
							title: '现代艺术展',
							cover: '/static/default-cover.png',
							startTime: '2023-09-01',
							endTime: '2023-11-30',
							status: 1
						},
						{
							id: 3,
							title: '特别主题展',
							cover: '/static/default-cover.png',
							startTime: '2023-10-01',
							endTime: '2023-12-15',
							status: 1
						}
					];
					this.bannerList = this.exhibitionList.slice(0, 3);
				} finally {
					this.loading = false;
				}
			},
			
			// 跳转到展览详情
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/exhibition/index?id=${id}`
				});
			},
			
			// 跳转到全部展览
			navigateToAllExhibitions() {
				uni.navigateTo({
					url: '/pages/exhibitions/index'
				});
			},
			
			
			
			// 跳转到预约页面
			navigateToReservation() {
				// 判断是否登录
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo) {
					uni.navigateTo({
						url: '/pages/login/index'
					});
					return;
				}
				
				// 如果有展览，跳转到第一个展览的预约页面
				if (this.exhibitionList.length > 0) {
					uni.navigateTo({
						url: `/pages/reservation/index?exhibitionId=${this.exhibitionList[0].id}`
					});
				} else {
					uni.showToast({
						title: '当前没有可预约的展览',
						icon: 'none'
					});
				}
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			
			// 判断展览是否正在进行中
			isActive(exhibition) {
				return exhibition.status === 1;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 120rpx;
		background-color: #f8f9fa;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #4a6bdf;
	}
	
	.custom-navbar {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #4a6bdf;
		color: #fff;
		
		.navbar-title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	
	.banner {
		width: 100%;
		height: 400rpx;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
		
		image {
			width: 100%;
			height: 100%;
		}
		
		.banner-title {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 24rpx;
			background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}
	
	.quick-nav {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 30rpx;
		background-color: #fff;
		margin: -20rpx 30rpx 10rpx;
		position: relative;
		z-index: 10;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
		
		.quick-nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.icon-circle {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;
				box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
				transition: all 0.3s;
				
				&.exhibition-icon {
					background: linear-gradient(135deg, #4a6bdf, #644ae8);
				}
				
				&.reservation-icon {
					background: linear-gradient(135deg, #ff9500, #ff7643);
				}
				
				.icon-text {
					color: #fff;
					font-size: 36rpx;
					font-weight: 600;
				}
			}
			
			text {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
			
			&:active .icon-circle {
				transform: scale(0.95);
				box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.15);
			}
		}
	}
	
	.card {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
	
	.card-title {
		display: flex;
		align-items: center;
			margin-bottom: 30rpx;
			position: relative;
		
		.title-text {
				font-size: 32rpx;
				font-weight: 600;
			color: #333;
				margin-right: 16rpx;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					left: -10rpx;
					top: 12rpx;
					bottom: 12rpx;
					width: 4rpx;
					background: linear-gradient(to bottom, #4a6bdf, #644ae8);
					border-radius: 2rpx;
				}
		}
		
		.title-line {
			flex: 1;
				height: 1rpx;
				background-color: #eee;
		}
		
			.more-btn {
				display: flex;
				align-items: center;
				margin-left: 16rpx;
				font-size: 26rpx;
				color: #4a6bdf;
				padding: 4rpx 10rpx;
				border-radius: 20rpx;
				transition: all 0.3s;
				
				&:active {
					background-color: rgba(74, 107, 223, 0.1);
				}
				
				text {
					margin-right: 6rpx;
				}
				
				.arrow-right {
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #4a6bdf;
					border-right: 2rpx solid #4a6bdf;
					transform: rotate(45deg);
				}
			}
		}
	}
	
	.museum-info {
		.info-content {
			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.info-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 14rpx;
					
					&.time-icon {
						background-color: rgba(74, 107, 223, 0.1);
						color: #4a6bdf;
					}
					
					&.location-icon {
						background-color: rgba(90, 200, 250, 0.1);
						color: #5ac8fa;
					}
					
					&.phone-icon {
						background-color: rgba(255, 149, 0, 0.1);
						color: #ff9500;
					}
					
					.icon-inner {
						font-size: 22rpx;
						font-weight: 600;
					}
				}
				
				.label {
			font-size: 28rpx;
				color: #666;
					width: 160rpx;
					flex-shrink: 0;
			}
			
			.value {
					font-size: 28rpx;
					color: #333;
				flex: 1;
				}
			}
		}
	}
	
	.exhibition-list {
		.loading-wrapper, .empty-wrapper {
			padding: 40rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.empty-icon {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
				opacity: 0.8;
			}
			
			text {
				font-size: 28rpx;
				color: #999;
			}
		}
		
		.exhibition-item {
			display: flex;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #f0f0f0;
			transition: all 0.3s;
			
			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
			
			&:active {
				opacity: 0.8;
				transform: translateX(5rpx);
			}
			
			.exhibition-img {
				width: 220rpx;
				height: 150rpx;
				border-radius: 12rpx;
				margin-right: 24rpx;
				box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
				overflow: hidden;
				background-color: #f5f5f5;
			}
			
			.exhibition-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.exhibition-title {
					font-size: 30rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 12rpx;
					line-height: 1.4;
				}
				
				.exhibition-time {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 12rpx;
					
					.time-icon-small {
						width: 28rpx;
						height: 28rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(74, 107, 223, 0.1);
						margin-right: 8rpx;
						
						.icon-inner-small {
							font-size: 18rpx;
							color: #4a6bdf;
							font-weight: 600;
						}
					}
					
					text {
						margin-left: 0;
					}
				}
				
				.exhibition-status {
					display: inline-block;
					font-size: 22rpx;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;
					background-color: rgba(153, 153, 153, 0.1);
					color: #999;
					
					&.status-active {
						background-color: rgba(74, 107, 223, 0.1);
						color: #4a6bdf;
					}
				}
			}
		}
	}
	
	.reserve-entry {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		
		.reserve-btn {
			height: 90rpx;
			background: linear-gradient(to right, #4a6bdf, #644ae8);
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			box-shadow: 0 6rpx 16rpx rgba(74, 107, 223, 0.3);
			transition: all 0.3s;
			
			&:active {
				transform: translateY(3rpx);
				box-shadow: 0 3rpx 8rpx rgba(74, 107, 223, 0.3);
			}
		}
	}
	
	// 公告弹窗样式
	.announcement-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		
		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
		}
		
		.popup-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 85%;
			height: 70%;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
			
			.popup-header {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f0f0f0;
				
				.popup-title {
					font-size: 34rpx;
					font-weight: 600;
					color: #333;
				}
				
				.popup-close {
					font-size: 40rpx;
					color: #999;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					transition: all 0.3s;
					
					&:active {
						background-color: #f5f5f5;
					}
				}
			}
			
			.popup-body {
				flex: 1;
				padding: 30rpx;
				
				.announcement-item {
					padding: 20rpx 0;
					border-bottom: 1rpx solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.announcement-title {
						font-size: 30rpx;
						font-weight: 600;
						color: #333;
						margin-bottom: 10rpx;
					}
					
					.announcement-time {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 16rpx;
					}
					
					.announcement-content {
						font-size: 28rpx;
						color: #666;
						line-height: 1.6;
					}
				}
			}
		}
	}
</style>
